import React, { Component } from 'react'
import style from "../../assets/styles/fenye.module.css"
import PropTypes from "prop-types"

class Pageing extends Component {
    //mounted 挂载完毕
    get totalPage() {
        const { pageSize, total } = this.props
        return Math.ceil(total / pageSize)
    }
    get showPage() {
        let temp = []
        for (let index = 0; index < this.totalPage; index++) {
            temp.push(<span index={index + 1} key={index}>{index + 1}</span>)
        }
        return temp
    }
    checkSpan = (event) => {
        //如果这个属性是span官方定义，对象.属性
        //这个属性你自己定义。无法获取
        if (event.target.nodeName == "SPAN") {
            const page = event.target.getAttribute("index")
            console.log(event.target.nodeName);
            this.props.parentGetPage(Number(page))
        }

    }
    render() {
        const { currentPage, pageSize, total } = this.props
        return (
            <div className={style.fenye}>
                <span>当前{currentPage}页/共{this.totalPage}页</span>
                <select name="" id="" style={{ width: "60px" }}>
                    <option value="">3</option>
                    <option value="">6</option>
                    <option value="">9</option>
                </select>
                <input type="text" style={{ width: "60px" }} placeholder='指定跳转页码' />
                <div className={style.page} onClick={this.checkSpan}>
                    {this.showPage}
                </div>
            </div>
        )
    }
}

//在暴露给外部调用之前，我们内部先进行props的验证
// Pageing.propTypes = {
//     currentPage:PropTypes.number.isRequired,
//     pageSize:PropTypes.number.isRequired
// }
Pageing.defaultProps = {
    currentPage: 3
}

export default Pageing